<template>
  <div class="img">
    <img src="../assets/2.jpg" alt="">
    <div class="login-overlay">
      <div class="login">
        <div class="logo-container">
          <h2>登录</h2>
        </div>
        <form @submit.prevent="login">
          <div class="form-group">
            <label for="role">角色:</label>
            <select v-model="role" id="role" required>
              <option value="teacher">教师</option>
              <option value="student">学生</option>
            </select>
          </div>
          <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" v-model="username" id="username" required>
          </div>
          <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" v-model="password" id="password" required>
          </div>
            <button type="submit" class="login-button">登录</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserLogin',
  data() {
    return {
      username: '',
      password: '',
      role: '',
    };
  },
  methods: {
    login() {
      const users = {
        teacher: { username: 'teacher', password: '1234' },
        student: { username: 'student', password: '1234' }
      };

      const user = users[this.role];
      if (user && user.username === this.username && user.password === this.password) {
        localStorage.setItem('authenticated', 'true');
        localStorage.setItem('role', this.role);
        if (this.role === "teacher") {
          this.$router.push('/teacher');
        } else if (this.role === "student") {
          this.$router.push('/student');
        }
      } else {
        alert('无效的凭证');
      }
    }
  }
};
</script>

<style scoped>
.img {
  position: relative;
}

.login {
  width: 300px;
  margin: 100px auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
  text-align: center;
}

.logo-container {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.login-button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-button:hover {
  background-color: #0056b3;
}

.login-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>